<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://static.zhihuiyouzhan.com.cn/static/admin/layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section>
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>营销券</h3>
			<h4>概览</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="marke-recall-tit">
				<dl class="active">选择方案<span></span></dl>
				<dl>确认实施</dl>
			</div>
			<!--marke-recall-list-->
			<form class="marke-recall-list layui-form">
				<div class="marke-recall">
					<i class="fa fa-check-circle fa-2x"></i>
					<h3>基础召回</h3>
					<dl>
						<dt>计划召回人数<a class="check">（查看）</a></dt>
						<dd>2人</dd>
					</dl>
					<dl>
						<dt>预计召回人数</dt>
						<dd>大于等于2人</dd>
					</dl>
					<dl>
						<dt>预计召回率</dt>
						<dd>30%</dd>
					</dl>
					<dl>
						<dt>券面额</dt>
						<dd>
							<div class="marke-select">
								<dl class="marke-sele-txt">--请选择--</dl><i class="fa fa-chevron-down" ></i>
								<ul class="marke-selects">
									<li><h6>优惠券1</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
									<li><h6>优惠券2</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>券总价值</dt>
						<dd id="select1">请选择优惠券</dd>
					</dl>
					<dl>
						<dt>短信费</dt>
						<dd>0.4</dd>
					</dl>
					<dl>
						<dt>召回有效期(天)</dt>
						<dd class="marke-sele-dis"><input type="text" value="15" maxlength="9" disabled/></dd>
					</dl>
				</div> 
				<div class="marke-recall">
					<i class="fa fa-check-circle fa-2x"></i>
					<h3>标准召回</h3>
					<dl>
						<dt>计划召回人数<a class="check">（查看）</a></dt>
						<dd>1人</dd>
					</dl>
					<dl>
						<dt>预计召回人数</dt>
						<dd>大于等于2人</dd>
					</dl>
					<dl>
						<dt>预计召回率</dt>
						<dd>55%</dd>
					</dl>
					<dl>
						<dt>券面额</dt>
						<dd>
							<div class="marke-select">
								<dl class="marke-sele-txt">--请选择--</dl><i class="fa fa-chevron-down" ></i>
								<ul class="">
									<li><h6>优惠券1</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
									<li><h6>优惠券2</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>券总价值</dt>
						<dd id="select2">请选择优惠券</dd>
					</dl>
					<dl>
						<dt>短信费</dt>
						<dd>0.4</dd>
					</dl>
					<dl>
						<dt>召回有效期(天)</dt>
						<dd class="marke-sele-dis"><input type="text" value="15" maxlength="9" disabled/></dd>
					</dl>
				</div><div class="marke-recall">
					<i class="fa fa-check-circle fa-2x"></i>
					<h3>高质量召回</h3>
					<dl>
						<dt>计划召回人数<a class="check">（查看）</a></dt>
						<dd>6人</dd>
					</dl>
					<dl>
						<dt>预计召回人数</dt>
						<dd>大于等于2人</dd>
					</dl>
					<dl>
						<dt>预计召回率</dt>
						<dd>75%</dd>
					</dl>
					<dl>
						<dt>券面额</dt>
						<dd>
							<div class="marke-select">
								<dl class="marke-sele-txt">--请选择--</dl><i class="fa fa-chevron-down" ></i>
								<ul class="marke-selects">
									<li><h6>优惠券1</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
									<li><h6>优惠券2</h6>
										<div class="marke-select-tab">
											<div class="marke-select-i"><div class="marke-select-ii"><i></i><i></i></div></div>
											<h3>优惠券信息</h3>
											<dl>
												<dt>优惠券名称</dt>
												<dd>加油即送优惠券</dd>
											</dl>
											<dl>
												<dt>优惠券类型</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>金额</dt>
												<dd>加油送券</dd>
											</dl>
											<dl>
												<dt>倒计时优惠券</dt>
												<dd>加油送券</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>券总价值</dt>
						<dd id="select3">请选择优惠券</dd>
					</dl>
					<dl>
						<dt>短信费</dt>
						<dd>0.4</dd>
					</dl>
					<dl>
						<dt>召回有效期(天)</dt>
						<dd class="marke-sele-dis"><input type="text" value="15" maxlength="9" disabled/></dd>
					</dl>
				</div>
				<!--/submit-->
				<span class="submit">提交</span>
			</form>
			
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/admin/layui/layui.js" ></script>
			<script type="text/javascript">
				layui.use(['layer','jquery','form'],function(){
					var $=layui.jquery
					var layer=layui.layer;
					var form=layui.form
					
					
					$('.marke-recall').eq(0).addClass('active')
					//激活
					 
					
					$('.marke-recall>i').bind('click',function(){
						$(this).parent().addClass('active').siblings().removeClass('active')
						$('.marke-sele-txt').css('color','#CCCCCC')
						$('.marke-sele-dis').children('input').attr('disabled','true')
						$('.check').unbind('click')
						oActive()
					})
					
					//激活当前选中的元素
					function oActive(){
						$('.marke-recall-list>.active').siblings().find('.marke-select').unbind('click')
						 index=$('.marke-recall-list>.active').index()
						 
						 
						 console.log(index)
						 console.log($('.marke-recall').length)
						
						//点击显示隐藏
						$('.marke-select').eq(index).bind('click',function(event){
							event.stopPropagation()
							$('.marke-selects').eq(index).slideToggle(100)
						})
						$('.marke-sele-txt').eq(index).css('color','#000000')
						//选中
						$('.marke-selects').eq(index).find('h6').bind('click',function(event){
							event.stopPropagation()
							$(this).addClass('active').parents().siblings().children('h6').removeClass('active')
							$('.marke-selects').eq(index).slideUp(100)
							$('.marke-sele-txt').eq(index).text($(this).text())
							
						})
						
						$('.marke-sele-dis').eq(index).children('input').removeAttr('disabled')
						
						
						//弹出层 
						$('.check').eq(index).bind('click',function(){
							layer.open({
								type:2,
								title:'召回详情',
								area: ['700px', '600px'],
								offset: 'auto',
								shadeClose:true,
								content:'一键召回-创建召回-查看召回.html'
							})
						})
					}

					//hover事件
					$('.marke-selects>li>h6').hover(function(){
						$(this).next().fadeIn(30)
					},function(){
						$(this).next().fadeOut(30)
					})
					
					
					//全局点击隐藏
					$(document).bind('click',function(){
						$('.marke-selects').slideUp(100)
					})
					
					
					$('.submit').bind('click',function(){
						//是否选优惠券
						if($('.marke-sele-txt').eq(index).text()=='--请选择--'){
							layer.msg('请选择优惠券',{icon:2})
							return false
						}
						
						})
					
					
				})
			</script>
		</aside>
		<!--/js-->
</body>
</html>